<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单成功</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="fonts/glyphicons-halflings-regular.woff2">
</head>
<body style="background-color:#f5f5f5">
<div id="top"></div>
<div class="container" style="background-color: white;">
    <div class="row" style="margin-left: 40px;margin-top: 5%">
        <h3>我的订单列表&nbsp;&nbsp;</h3>
    </div>
    <div class="row" style="margin-top: 40px;">
        <div class="col-md-12">
            <table id="tb_list" class="table table-striped table-hover table-bordered table-condensed">
                <tr>
                    <th>序号</th>
                    <th>订单编号</th>
                    <th>总金额</th>
                    <th>订单状态</th>
                    <th>订单时间</th>
                    <th>操作</th>
                </tr>
                <tbody id="order-list" style="table-layout: fixed;border-collapse: collapse"></tbody>
            </table>
        </div>
    </div>

</div>

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")
        $.ajax({
            url: "/PDD/order?method=showOrder",
            dataType: "json",
            success: function (data) {
                if(data.code===401){
                    window.location.href="login.html"
                }
                let orderList=data.data
                let html=""
                for (let i = 1; i <= orderList.length; i++) {
                    let order = orderList[i-1]
                    html += `
<tr>
  <th>${i}</th>
  <th>${order.oId}</th>
  <th>${order.oCount.toFixed(2)}</th>
  <th>
     <span id="state${i}" style="color: red"></span>
  </th>
  <th>${order.oTime}</th>
  <th>
    <button id="detail${i}" type="button" class="btn btn-danger btn-sm" >订单详情</button>
    <button id="confirm${i}" type="button" class="btn btn-warning btn-sm" ></button>
  </th>
</tr>
`;
                }
                $("#order-list").html(html)
                for (let i = 1; i <= orderList.length; i++) {
                    let order = orderList[i-1]
                    let confirm= $("#confirm"+i)
                    //绑定订单详情的点击事件
                    $("#detail"+i).click(function (){
                        window.location.href="/PDD/orderDetail.html?oId="+order.oId
                    })

                    //根据订单状态更换提示信息
                    let state=parseInt(order.oState)
                    if(state===0){
                        $("#state"+i).html("未支付")
                        confirm.html("去支付")
                        //绑定去支付的点击事件
                        confirm.click(function (){
                            window.location.href="/PDD/pay.html?oId="+order.oId+"&totalCount="+order.oCount.toFixed(2)
                        })
                    }else if(state===1){
                        $("#state"+i).html("已支付未确认")
                        confirm.html("确认收货")
                        //绑定确认收货的点击事件(修改订单状态+修改商品库存+销量)
                        confirm.click(function (){
                            $.ajax({
                                url:"/PDD/order?method=modifyStateAndProduct",
                                data:{
                                    "oId":order.oId,
                                    "oState":2
                                },
                                dataType: "json",
                                success:function (data){
                                    alert(data)
                                    alert(data.code===-1)
                                    if(data.code===-1){
                                        alert("发生错误")
                                    }else{
                                        location.reload();
                                    }
                                },
                                error: function(jqXHR, textStatus, errorThrown) {
                                    // 处理错误响应
                                    alert(jqXHR+textStatus+errorThrown)
                                }
                            })
                        })
                    }else if(state===2){
                        $("#state"+i).html("订单已完成")
                        confirm.html("已收货")
                    }
                }


            },
            error: function (jqXHR) {
                alert("失败" + jqXHR.responseText); // 输出响应内容
            }
        })
    })
</script>

</body>
</html>